<script lang="ts">
export default {
  name: 'Study6StuDemo2'
}
</script>

<template>
  <h1>{{ fTitle }}</h1>
  <h2>组件传值:props</h2>

  <hr class="hr-style" />
  <div class="test">
    <div class="group">
      <h2>SonDemo1</h2>
      <SonDemo1 :title="`我是子组件的标题`" :descript="des"></SonDemo1>
    </div>
    <div class="group">
      <h2>SonDemo3</h2>
      <SonDemo3 title="我是子组件的标题" des="sd3描述内容" :propH="sd3PropsFunc"></SonDemo3>
    </div>
    <div class="group">
      <h2>SonDemo4</h2>
      <SonDemo4 msg="举杯邀明月，对影成三人" ></SonDemo4>
    </div>
    <div class="group">
      <h2>SonDemo5</h2>
      <SonDemo5 msg="举杯邀明月，对影成三人" ></SonDemo5>
    </div>
    <div class="group">
      <h2>SonDemo6</h2>
      <SonDemo6 msg="举杯邀明月，对影成五人" ></SonDemo6>
    </div>
    <div class="group">
      <h2>SonDemo7</h2>
      <SonDemo7 title="床前明月光,国庆回家乡" :user msg="躺尸七天" ></SonDemo7>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {type Iuser} from './components/SonDemo7.vue'
import SonDemo1 from './components/SonDemo1.vue'
import SonDemo3 from './components/SonDemo3.vue'
import SonDemo4 from './components/SonDemo4.vue';
import SonDemo5 from './components/SonDemo5.vue';
import SonDemo6 from './components/SonDemo6';
import SonDemo7 from './components/SonDemo7.vue';

// 定义一个变量接收函数的传值
const fTitle = ref('')
const des = 777

// 函数类型的属性 相当于一个回调函数
const sd3PropsFunc = (sonTitle:any,fc:Function,fc2:Function)=>{
  fTitle.value = sonTitle
  fc()
  fc2()
  console.log('这是一个父组件的函数，他被传入了子组件', sonTitle);
}

const user = ref<Iuser>({
  age: 66,
  name: '黄嘉辉',
  sex: '男'
})
</script>

<style scoped>
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.group {
  border: 4px solid rgb(102, 215, 85);
  margin: 20px 0;
  padding: 10px;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
